<template>
  <div class="setting_box">
    <div class="setting_bar">
      <div class="setting_bar_item" @click="settingIndex=1" :class="{setting_bar_item_selected:settingIndex===1}">
        <span class="text justify">服务器配置<el-badge is-dot class="update-tips"
                                                  v-if="updateStatus === 3"></el-badge></span>
      </div>
      <div class="setting_bar_item" @click="settingIndex=6" :class="{setting_bar_item_selected:settingIndex===6}">
        <span class="text justify">系统配置</span>
      </div>
      <div class="setting_bar_item" @click="settingIndex=2" :class="{setting_bar_item_selected:settingIndex===2}">
        <span class="text justify">幻灯片配置</span>
      </div>
      <div class="setting_bar_item" @click="settingIndex=5" :class="{setting_bar_item_selected:settingIndex===5}">
        <span class="text justify">预案配置</span>
      </div>
      <div class="setting_bar_item" v-if="skin.app.isRegister" @click="settingIndex=3"
           :class="{setting_bar_item_selected:settingIndex===3}">
        <span class="text justify">注册</span>
      </div>
      <div class="setting_bar_item" @click="settingIndex=4" :class="{setting_bar_item_selected:settingIndex===4}">
        <span class="text justify">关于</span>
      </div>
    </div>
    <div class="setting_container">
      <div v-show="settingIndex===1" class="server">
        <div class="server_item">
          <div class="label">出庭辅助系统</div>
          <span>
            <span>服务器地址：</span><input type="text" v-model="tyywIP"></span>
        </div>
        <div class="server_item server_item_l" v-if="visible">
          <div class="label">版本更新</div>
          <span class="server_item_l_span">
            <span>更新地址：</span>
            <input type="text" v-model="feedUrl">
          </span>
          <div class="update-check-content">
            <div class="update-check-tips">{{ updateTips }}</div>
            <el-progress :percentage="downloadPercent" v-show="updateStatus === 5"></el-progress>
          </div>
          <div class="update-check-group">
            <el-button type="primary" class="set-update-btn" size="mini" @click="updateDownload"
                       v-if="updateStatus === 3">下载更新
            </el-button>
            <el-button type="primary" class="set-update-btn" size="mini" @click="quitAndInstall"
                       v-if="updateStatus === 6">立即重启
            </el-button>
          </div>
        </div>
        <!--        <div class="server_item" v-if="skin.app.showZsIP">-->
        <!--          <div class="label">公诉办案助手</div>-->
        <!--          <span>-->
        <!--            <span>服务器地址：</span><input type="text" v-model="gszsIP"></span>-->
        <!--        </div>-->
        <el-button type="primary" class="btn" size="mini" @click="saveIP">保&nbsp;&nbsp;存
        </el-button>
      </div>
      <div v-show="settingIndex===2" class="slide">
        <div class="slide_item">
          <div class="label">动&nbsp;&nbsp;画</div>
          <span>
            <span>类型：</span>
            <select v-model="customAnimationName" class="input">
              <option v-for="item in animations" :key="item.id" :label="item.label" :value="item.id"></option>
            </select>
          </span>
          <span>
            <span>时长：</span>
            <select v-model="customAnimationTime" class="input">
              <option v-for="item in 5" :key="item+'s'" :label="item+'s'" :value="item+'s'"></option>
            </select>
          </span>
        </div>
        <div class="slide_item">
          <div class="label">字&nbsp;&nbsp;体</div>
          <span>
            <span>字体：</span>
            <select value="customElementFontName" class="input">
              <option v-for="item in fontStyles" :key="item.value" :label="item.label" :value="item.value"></option>
            </select>
          </span>
          <span>
            <span>字号：</span>
            <select v-model="customElementFontSize" class="input">
              <option v-for="item in 100" :key="item+'px'" :label="item+'px'" :value="item+'px'"
                      v-if="item>20 && item%2==0"></option>
            </select>
          </span>
          <span>
            <span>颜色：</span>
            <el-color-picker size="small" v-model="customElementFontColor"></el-color-picker>
          </span>
          <span>
            <el-checkbox v-model="customElementFontWeight" style="margin-left:15px">文本加粗</el-checkbox>
          </span>
        </div>
        <div class="slide_item">
          <div class="label">标&nbsp;&nbsp;注</div>
          <span>
            <span>宽度：</span>
            <select v-model="customGraphWidth" class="input">
              <option v-for="item in 5" :key="item+'px'" :label="item+'px'" :value="item+'px'"></option>
            </select>
          </span>
          <span>
            <span>颜色：</span>
            <el-color-picker size="small" v-model="customGraphColor"></el-color-picker>
          </span>
        </div>
        <div class="slide_item">
          <div class="label">画&nbsp;&nbsp;笔</div>
          <span>
            <span>宽度：</span>
            <select v-model="customBrushWidth" class="input">
              <option v-for="item in 10" :key="item" :label="item+'px'" :value="item"></option>
            </select>
          </span>
          <span>
            <span>颜色：</span>
            <el-color-picker size="small" v-model="customBrushColor"></el-color-picker>
          </span>
        </div>
        <!-- <div class="slide_item">
          <div class="label">放大镜</div>
          <span>
            <span>倍数：</span>
            <select v-model="defaultZoomMultiples" class="input">
              <option v-for="item in zoomSource" :key="item.value" :label="item.label" :value="item.value"></option>
            </select>
          </span>
        </div> -->
        <editor-config/>
        <cover-config/>
        <div class="slide_item">
          <div class="label">编辑区显示比例</div>
          <span class="row">
            <el-radio v-model="containerScale" label="fullScreen">铺满</el-radio>
            <el-radio v-model="containerScale" label="rectangle">4:3</el-radio>
            <el-radio v-model="containerScale" label="16:9">16:9</el-radio>
          </span>
        </div>
        <div class="slide_item">
          <div class="label">播&nbsp;&nbsp;放</div>
          <span class="row">
            <span class="s_time">间隔时间：</span>
            <select v-model="playSpeed" class="input">
              <option v-for="item in 10" :key="item" :label="item+'s'" :value="item"></option>
            </select>
          </span>
          <span class="row">
            <el-checkbox v-model="autoPreview">预览时自动播放</el-checkbox>
          </span>
          <span class="row">
            <el-checkbox v-model="playNextSlide">当前放映完成后放映下一幻灯片</el-checkbox>
          </span>
        </div>
        <div class="slide_item">
          <div class="label">其&nbsp;&nbsp;他</div>
          <span class="row">
            <el-checkbox v-model="autoAddCatalog">幻灯片生成标题时自动添加上级目录</el-checkbox>
          </span>
        </div>
      </div>
      <div v-show="settingIndex===3" class="register">
        <div class="register_item">
          <div class="label">机器码:</div>
          <input v-model="machineCode" type="text" disabled>
        </div>
        <div class="register_item">
          <div class="label">序列号:</div>
          <input v-model="serialNo" type="text" maxlength="40" :readonly='isRegisted'>
        </div>
        <div class="msg">
          <span v-if='!isRegisted' style="color:red;">产品尚未注册</span>
          <span v-else style="color: green">产品已注册</span>
        </div>
        <el-button type="primary" v-show="!isRegisted" class="btn" size="mini" @click="toRegistered">注&nbsp;&nbsp;册
        </el-button>
      </div>
      <div v-show="settingIndex===4" class="about">
        <div class="about_title">
          <span>产品信息</span>
        </div>
        <div class="about_container">
          <div>产品：{{ skin.app.productName }}</div>
          <div>版本：{{ skin.app.version }}</div>
        </div>
        <div class="about_title">
          <span>许可证信息</span>
        </div>
        <div class="about_container">
          <div>类型：个人</div>
          <div v-if='!isRegisted'>
            <div>状态：未许可</div>
            <div v-if="usedDays>0"> 过期：离试用期结束还有{{ usedDays }}天</div>
            <div v-else>过期：已过期</div>
          </div>
          <div v-else>
            <div>状态：已许可</div>
            <div>过期：永不过期</div>
          </div>
        </div>
      </div>
      <div v-show="settingIndex===5" class="preplan">
        <!-- <pre-plan-config/> -->
        <div class="slide_item">
          <div class="label">预&nbsp;&nbsp;案</div>
          <span class="row">
            <el-checkbox v-model="isAddZjcl">示证大纲插入至预案时，添加证据材料</el-checkbox>
          </span>
          <span class="row">
            <el-checkbox v-model="isMergeDir">自动合并证据目录</el-checkbox>
          </span>
        </div>
        <div class="slide_item">
          <div class="label">导&nbsp;&nbsp;出</div>
          <span class="row">
            <el-checkbox v-model="isAddWjnr">预案导出为word时，添加证据材料内容</el-checkbox>
          </span>
        </div>
      </div>
      <div v-show="settingIndex===6" class="preplan">
        <div class="slide_item">
          <div class="label">授&nbsp;&nbsp;权</div>
          <span class="row">
            <el-checkbox v-model="isSync">是否同步授权信息</el-checkbox>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import common from '../../common/common'
import {action, mutation} from '@/common/quantity'
import actions from '../../common/typeActions'
import L from '../../common/localStore'
import M from '../../common/typeMutations'
import moment from 'moment'

const crypto = require('crypto')
const skin = require('../../config/skin')

import packageJson from '../../../package.json'

import EditorConfig from "@/views/SlideEditor/EditorConfig";
import CoverConfig from "@/views/SlideEditor/CoverConfig";

export default {
  components: {EditorConfig, CoverConfig},
  name: 'Setting',
  data() {
    return {
      Version: packageJson.version,
      settingIndex: 1,
      skin: skin[skin.useSkin],
      radio: '',
      checked: '',
      color1: '',
      tyywIP: '',
      // gszsIP: '',
      zoomSource: [
        {label: '1倍', value: 100},
        {label: '2倍', value: 80},
        {label: '3倍', value: 60},
        {label: '4倍', value: 40},
        {label: '5倍', value: 20}
      ]
    }
  },
  computed: {
    ...mapState({
      // 是否注册
      isRegisted: state => state.container.isRegisted,
      machineCode: state => state.container.machineCode,
      // 试用期限
      usedDays: state => state.container.usedDays,
      // 产品名称
      // productName: state => state.container.productName,
      customized: state => state.slideEditor.customized,
      animations: state => state.slideEditor.animations,
      fontStyles: state => state.slideEditor.fontStyles,

      userInfo: state => state.mainPage.userInfo,
      preplanOptions: state => state.common.preplanOptions,
      feedUrl: state => state.system.feedUrl,
      visible: state => state.system.visible,
      downloadPercent: state => state.system.downloadPercent,
      updateTips: state => state.system.updateTips,
      updateStatus: state => state.system.updateStatus
    }),
    // 序列号
    serialNo: {
      get() {
        return this.$store.state.container.serialNo
      },
      set(value) {
        this.$store.dispatch(action.container.setSerialNo, value)
      }
    }, // 播放间隙
    isSync: {
      get() {
        return this.$store.state.container.isSync
      },
      set(value) {
        this.$store.dispatch(action.container.setSync, value)
      }
    }, // 播放间隙
    playSpeed: {
      get() {
        return this.customized.PlaySpeed
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAttr, {
          attrName: 'PlaySpeed',
          attrValue: value
        })
      }
    },
    // 放大镜缩放倍数
    defaultZoomMultiples: {
      get() {
        return this.customized.DefaultZoomMultiples
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAttr, {
          attrName: 'DefaultZoomMultiples',
          attrValue: value
        })
      }
    },
    // 容器比例
    containerScale: {
      get() {
        return this.customized.ContainerScale
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAttr, {
          attrName: 'ContainerScale',
          attrValue: value
        })
      }
    },
    // 播放下一节点
    playNextSlide: {
      get() {
        return this.customized.PlayNextSlide
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAttr, {
          attrName: 'PlayNextSlide',
          attrValue: value
        })
      }
    },
    // 预览时是否自动播放
    autoPreview: {
      get() {
        return this.customized.AutoPreview
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAttr, {
          attrName: 'AutoPreview',
          attrValue: value
        })
      }
    },
    // 自动添加示证目录
    autoAddCatalog: {
      get() {
        return this.customized.AutoAddCatalog
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAttr, {
          attrName: 'AutoAddCatalog',
          attrValue: value
        })
      }
    },
    customElementFontName: {
      get() {
        return this.customized.DefaultElementStyle.name
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomElementAttr, {
          attrName: 'name',
          attrValue: value
        })
      }
    },
    customElementFontSize: {
      get() {
        return this.customized.DefaultElementStyle.size
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomElementAttr, {
          attrName: 'size',
          attrValue: value
        })
      }
    },
    customElementFontColor: {
      get() {
        return this.customized.DefaultElementStyle.color
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomElementAttr, {
          attrName: 'color',
          attrValue: value
        })
      }
    },
    customElementFontWeight: {
      get() {
        return this.customized.DefaultElementStyle.fontWeight === 'bold'
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomElementAttr, {
          attrName: 'fontWeight',
          attrValue: value ? 'bold' : 'normal'
        })
      }
    },
    customGraphWidth: {
      get() {
        return this.customized.DefaultGraphStyle.width
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomGraphAttr, {
          attrName: 'width',
          attrValue: value
        })
      }
    },
    customGraphColor: {
      get() {
        return this.customized.DefaultGraphStyle.color
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomGraphAttr, {
          attrName: 'color',
          attrValue: value
        })
      }
    },
    customBrushWidth: {
      get() {
        return this.customized.DefaultBrush.width
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomBrushAttr, {
          attrName: 'width',
          attrValue: value
        })
      }
    },
    customBrushColor: {
      get() {
        return this.customized.DefaultBrush.color
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomBrushAttr, {
          attrName: 'color',
          attrValue: value
        })
      }
    },
    customAnimationName: {
      get() {
        return this.customized.DefaultAnimation.id
      },
      set(value) {
        let animation = this.animations.find(x => x.id === value)
        if (animation) {
          this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAnimationAttr, [
            {attrName: 'id', attrValue: animation.id},
            {attrName: 'name', attrValue: animation.value}
          ])
        }
      }
    },
    customAnimationTime: {
      get() {
        return this.customized.DefaultAnimation.time
      },
      set(value) {
        this.$store.dispatch(actions.SLIDEEDITOR.SetCustomAnimationAttr, {
          attrName: 'time',
          attrValue: value
        })
      }
    },
    isAddZjcl: {
      get() {
        return this.preplanOptions.isAddZjcl
      },
      set(value) {
        this.$store.commit(mutation.common.setPreplanOptions, {
          ...this.preplanOptions,
          isAddZjcl: value
        })
      }
    },
    isMergeDir: {
      get() {
        return this.preplanOptions.isMergeDir
      },
      set(value) {
        this.$store.commit(mutation.common.setPreplanOptions, {
          ...this.preplanOptions,
          isMergeDir: value
        })
      }
    },
    isAddWjnr: {
      get() {
        return this.preplanOptions.isAddWjnr
      },
      set(value) {
        this.$store.commit(mutation.common.setPreplanOptions, {
          ...this.preplanOptions,
          isAddWjnr: value
        })
      }
    },
    feedUrl: {
      get() {
        return this.$store.state.system.feedUrl
      },
      set(v) {
        this.$store.commit(M.SYSTEM.setFeedUrl, v)
      }
    }
  },
  created() {
    // this.gszsIP = this.skin.app.zhgs ? this.skin.app.zhgs : localStorage.getItem('gszsIP')
    this.tyywIP = this.skin.app.tyyw ? this.skin.app.tyyw : localStorage.getItem('tyywIP')
    this.settingIndex = this.setIndex
  },
  methods: {
    ...mapActions({
      setCustomCoverText: actions.SLIDEEDITOR.SetCustomCoverText
    }),
    async saveIP() {
      // && !net.isIPv4(this.tyywIP)
      if (!this.tyywIP) {
        this.$alert('请输入统一业务应用系统服务器地址', '提示', {
          type: 'warning'
        })
        return
      }
      if (this.visible) {
        if (this.feedUrl) {
          L.LocalStore.setFeedUrl(this.feedUrl)
        } else {
          this.$alert('请输入版本地址', '提示', {
            type: 'warning'
          })
          return
        }
      }

      if (this.tyywIP) {
        try {
          common.GenerateConfigFiles(this.tyywIP, true)
          localStorage.setItem('tyywIP', this.tyywIP)
        } catch (e) {
          this.$alert(e.message, '错误', {type: 'error'})
          return
        }
      }

      // if (this.gszsIP) {
      //   localStorage.setItem('gszsIP', this.gszsIP)
      // }

      this.$alert(`保存成功，重启软件后生效。`, '提示', {type: 'success'})
    },
    toRegistered() {
      let temp = crypto
        .createHmac('sha1', 'TFSWX')
        .update(this.machineCode.toString('hex'))
        .digest('hex')
        .toLocaleUpperCase()
      if (temp === this.serialNo) {
        let regInfo = L.LocalStore.getRegInfo()
        if (regInfo) {
          regInfo.regDate = moment().format('YYYY-MM-DD hh:mm:ss')
          L.LocalStore.setRegInfo(regInfo)
          this.$store.commit(M.CONTAINER.INIT_CONTAINER, {isRegisted: true})
        }
      } else {
        this.$alert('序列号输入错误', '提示', {type: 'warning'})
      }
    },
    updateDownload() {
      ipcRenderer.send('updateMsg', {type: 'downloadUpdate'})
    },
    quitAndInstall() {
      ipcRenderer.send('updateMsg', {type: 'quitAndInstall'})
    }
  },
  props: {
    setIndex: {
      type: Number,
      default: 1
    }
  }
}
</script>
<style scoped lang="scss">
.setting_box {
  height: 100%;
  width: 100%;
  background-color: white;
  font-size: 0;
}

.setting_bar {
  display: inline-block;
  height: 100%;
  width: 100px;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}

.setting_bar_item {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #ccc;

  .text {
    width: 80px;
    display: block;
    margin: 0 auto;
  }

}

.setting_bar_item:hover {
  color: #157ac1;
}

.setting_bar_item_selected {
  background-color: #def2fe;
  color: #157ac1;
}

.setting_container {
  display: inline-block;
  font-size: 14px;
  height: 100%;
  width: calc(100% - 100px);
  /*background-color: #8dbbfd;*/
}

.about_title {
  margin-top: 30px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-image: url("~@/assets/img/about/img.png");
  background-repeat: no-repeat;
  background-position: center;
  font-size: 18px;
}

.about_container {
  width: calc(100% - 250px);
  margin: 0 auto;
}

.about_container div {
  font-size: 16px;
  margin-top: 10px;
}

.register {
  width: 100%;
  height: 100%;
}

.register .register_item {
  margin-top: 20px;
  margin-left: 8px;
}

.register .register_item .label {
  font-size: 20px;
  margin-bottom: 10px;
}

.register .register_item:nth-child(1) {
  margin-top: 30px;
}

.register .register_item input {
  width: calc(100% - 15px);
}

.register .msg {
  margin-left: 10px;
  font-size: 16px;
  margin-top: 20px;
}

.register .btn {
  position: absolute;
  bottom: 100px;
  right: 50px;
}

.server {
  width: 100%;
  margin: 0 auto;
  height: calc(100% - 50px);
  overflow-y: auto;
  top: 0;
  padding: 25px 48px 0;
}

.server .server_item {
  margin-top: 20px;
  height: 100px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  position: relative;
}

.server .server_item:nth-child(1) {
  margin-top: 0;
}

.server .server_item_l {
  height: auto;
}

.server_item_l .server_item_l_span {
  position: relative;
  bottom: 0;
  right: 0;
  margin: 30px 0 0 60px;
  display: inline-block;
}

.server .set-update-btn {
  font-size: 12px !important;
}

.server .update-check-content {
  display: inline-block;
  padding: 19px 10px 10px 20px;
  width: 280px;
  font-size: 13px !important;
}

.server .update-check-tips {
  padding-bottom: 10px;
  color: #333;
}

.server .update-check-group {
  display: inline-block;
  overflow: hidden;
  padding: 15px 10px;
  width: 100px;
  white-space: nowrap;
}

.server .btn {
  position: absolute;
  bottom: 10px;
  right: 54px;
}

.server_item .label {
  position: absolute;
  background-color: white;
  top: 0;
  left: 20px;
  font-size: 16px !important;
  transform: translateY(-50%);
}

.server_item span {
  position: absolute;
  bottom: 30px;
  right: 35px;
}

.server_item span span {
  position: static;
  vertical-align: baseline;
}

.server .server_item > * {
  font-size: 18px;
}

.server input {
  position: static;
}

select,
input {
  /*border: 1px solid #66afe9;*/
  /*outline: none;*/
  border: solid 1px;
  border-radius: 3px;
  padding: 3px 10px;
  height: 30px;
  width: 200px;
  font-size: 18px;
}

/*select:focus,*/
/*input:focus {*/
/*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),*/
/*0 0 8px rgba(102, 175, 233, 0.6);*/
/*}*/

.slide {
  width: 100%;
  height: 100%;
  /*background-color: #8dbbfd;*/
  overflow: auto;
  position: relative;
  padding-bottom: 10px;
}

.slide_item {
  width: calc(100% - 60px);
  margin: 10px auto 0;
  /*height: 100px;*/
  padding-bottom: 8px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  position: relative;
  font-size: 0;
}

.slide_item .label {
  position: absolute;
  background-color: white;
  top: 0;
  left: 20px;
  font-size: 12px !important;
  transform: translateY(-50%);
}

.slide_item > span {
  display: inline-block;
  margin-top: 16px;
  width: 50%;
  font-size: 14px;
}

.slide_item > span > span {
  position: static;
  vertical-align: baseline;
  margin-left: 10px;
  margin-top: 2px;
  display: inline-block;
}

.slide_item .input {
  width: calc(100% - 70px);
}

.slide_item .row {
  width: 100%;
  margin-left: 10px;
}

.slide_item .row .input {
  width: calc(100% - 280px);
}

.slide_item input,
.slide_item select {
  height: 25px;
  font-size: 14px;
  padding: 1px 10px;
}

/*.slide_item .row > span {*/
/*margin-left: 0;*/
/*}*/
.s_time {
  margin-left: 0 !important;
}

.disabled {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  background-color: grey;
  cursor: no-drop;
}

.setting_box .update-tips {
  transform: translate(78px, -36px);
}
</style>

<style>
.server .server_item_l .el-progress__text {
  margin-top: -3px;
  font-size: 13px !important;
}

.server .server_item_l .el-progress-bar__outer {
  height: 9px !important;
  border-radius: 0px;
}

.server .server_item_l .el-progress-bar__inner {
  border-radius: 0px;
}
</style>
